<template>
  <div>
    <!-- 顶部导航条 -->
    <div class="nav">
      <van-nav-bar title="购物车">
        <template #left>
          <van-icon @click="backGood()" name="arrow-left" />
        </template>
        <!-- <template #right>
          <div>编辑</div>
        </template> -->
      </van-nav-bar>
    </div>
    <!-- 优惠劵 -->
    <!-- 优惠券单元格 -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    <!-- 购物车商品信息 -->
    <van-checkbox-group v-model="result">
      <div class="cart-good" v-for="(item,index) in cartGood" :key="index">
        <van-checkbox @click="selectClick(index)" class="check-icon" :name="index"></van-checkbox>
        <div>
          <!-- 商品图片 -->
          <div>
            <img class="good-img" :src="item.productPic" />
          </div>
          <!-- 商品详情 -->
          <div class="good-infor">
            <div class="good-name">{{item.productVo.name}}</div>
            <div class="class-resord">
              <!-- 商品型号 -->
              <div class="good-class">型号：{{item.productVo.model}}</div>
              <!-- 商品价格 -->
              <div class="good-price">￥{{item.productVo.price}}</div>
            </div>
            <!-- 商品的数量-->
            <div class="cart-goodnum">
              <div class="good-numvary">
                <button class="good-num" :disabled="dis" @click="minus(index)">-</button>
                <div class="good-count">{{item.count}}</div>
                <button class="good-num" @click="add(index)">+</button>
              </div>
              <button @click="delClick(index)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </van-checkbox-group>
    <!-- 跟底部导航栏一样宽度的空白内容，撑起敢赌便于显示全部内容 -->
    <div class="null"></div>
    <!-- 底部导航栏 -->
    <div>
      <van-submit-bar :price="totalPrice*100" button-text="结算" @submit="onSubmit" />
    </div>
  </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};
import axios from 'axios';
export default {
  data() {
    return {
      totalPrice: 0,
      allPrice: 0,
      result: [],
      checked: true,
      dis: false,
      counts: '1',
      // 购物车商品信息
      cartGood: [],
      newCart: [],
      // 优惠劵
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false
    };
  },
  mounted() {
    console.log('商品详情id', this.$route.query.id);
    axios
      .post(
        '/api/showShopCart',
        {},
        {
          params: {
            userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
          }
        }
      )
      .then(res => {
        console.log(res);
        this.cartGood = res.data.data;
        console.log('数据详情', this.cartGood);
      });
  },
  methods: {
    selectClick(index) {
      console.log(this.result);
      this.totalPrice = 0;
      for (let i = 0; i < this.result.length; i++) {
        this.totalPrice =
          parseFloat(this.cartGood[this.result[i]].productVo.price) *
            parseInt(this.cartGood[this.result[i]].count) +
          this.totalPrice;
        console.log(this.totalPrice);
      }
        console.log('商品详细数据', this.cartGood[index]);
        this.newCart.push(this.cartGood[index]);
        console.log('确认订单数组：',this.newCart)
    },
    delClick(index) {
      console.log(index);
      //  请求删除商品事件
      axios({
        method: 'post',
        url: '/api/deleteShopCartProductById/' + this.cartGood[index].id
      }).then(res => {});
    this.cartGood.splice(index,1);
      console.log('删除之后的商品列表',this.cartGood)
      // 删除商品之后重新渲染购物车商品列表
      // axios
      //   .post(
      //     '/api/showShopCart',
      //     {},
      //     {
      //       params: {
      //         userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
      //       }
      //     }
      //   )
      //   .then(res => {
      //     console.log(res);
      //     this.cartGood = res.data.data;
      //     console.log('数据详情', this.cartGood);
      //   });
    },
    minus(index) {
      console.log('商品数量', this.cartGood[index].count, index);
      for (let i = 0; i < this.result.length; i++) {
        console.log('',this.cartGood[index].count);
        if (this.cartGood[index].count <= 1) {
          this.dis = true;
        } else {
          if (index === this.result[i]) {
            axios
              .post(
                '/api/updateShopCartProductCount',
                {},
                {
                  params: {
                    id: this.cartGood[index].id,
                    productId: this.cartGood[index].productId,
                    userNum: '02d2b3be-1295-481c-ba67-b82a30080135',
                    count: this.cartGood[index].count - 1
                  }
                }
              )
              .then(res => {});
            this.cartGood[index].count =
              parseInt(this.cartGood[index].count) - 1;
            this.totalPrice =
              this.totalPrice -
              parseFloat(this.cartGood[index].productVo.price);
          }
        }
      }
    },
    add(index) {
      this.dis = false;
      for (let i = 0; i < this.result.length; i++) {
        if (index === this.result[i]) {
          axios
            .post(
              '/api/updateShopCartProductCount',
              {},
              {
                params: {
                  id: this.cartGood[index].id,
                  productId: this.cartGood[index].productId,
                  userNum: '02d2b3be-1295-481c-ba67-b82a30080135',
                  count: this.cartGood[index].count - 1
                }
              }
            )
            .then(res => {});
          this.cartGood[index].count = parseInt(this.cartGood[index].count) + 1;
          this.totalPrice =
            this.totalPrice + parseFloat(this.cartGood[index].productVo.price);
        }
      }
    },
    backGood() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    // 点击结算跳转
    onSubmit() {
      this.$router.push({
        name: '确认订单',
        //带参数;
        query: {
          list: this.newCart,
          Price: this.totalPrice
        }
      });
      console.log('点击结算带着参数', this.cartGood);
      console.log('跳转传递的价钱参数', this.allPrice);
    }
  }
};
</script>
<style scoped>
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
}
.cart-good {
  padding-top: 1rem;
  border-top: 0.1rem solid rgb(233, 230, 230);
  display: flex;
  justify-content: space-evenly;
}
.good-img {
  width: 8rem;
  height: 10rem;
}
.good-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
}
.good-num {
  width: 2rem;
  height: 2rem;
}
.cart-goodnum {
  display: flex;
  justify-content: space-between;
}
.good-price {
  color: orangered;
  font-size: 2rem;
  font-weight: bolder;
}
.good-name {
  width: 20rem;
  height: 2rem;
  font-size: 1.5rem;
}
.good-class {
  width: 15rem;
  height: 2rem;
  border: 0.1rem solid gray;
  display: flex;
  align-items: center;
}
.good-infor {
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.class-resord {
  display: flex;
  justify-content: space-between;
}
.good-numvary {
  display: flex;
  justify-content: start;
}
.check-icon {
  /* width: 1rem; */
  margin-left: -10rem;
  margin-right: -10rem;
}
.null {
  width: 100%;
  height: 5rem;
}
</style>